<!--
/**
* Author: gaohui
* Date: 2023-03-03 12:32
* Desc: DynamicImgComp 动态图片
*/
-->

<template>
  <title-line title="动态切换图片" />
  <div>
    <img class="avatar-img" :src="getImage" alt="图片" />
  </div>
  <div class="mt10">
    <el-button @click.stop="changeImg">切换图片</el-button>
  </div>
</template>

<script name="DynamicImgComp" lang="ts" setup>
import { ref, computed } from "vue";
import AvatarOne from "@/assets/img/avatar1.png";
import AvatarTwo from "@/assets/img/avatar2.png";
import AvatarThree from "@/assets/img/avatar3.png";

const imgMap = {
  0: AvatarOne,
  1: AvatarTwo,
  2: AvatarThree,
};

const imgIndex = ref(0);
const getImage = computed(() => {
  return imgMap[imgIndex.value];
});

const changeImg = () => {
  imgIndex.value += 1;
  if (imgIndex.value > 2) {
    imgIndex.value = 0;
  }
};
</script>
<style lang="scss" scoped>
.avatar-img {
  width: 200px;
  height: 200px;
  border-radius: 5px;
}
</style>
